import { Suspense, lazy } from 'react'
import { useRoutes, Navigate } from "react-router-dom"
import { Spin } from 'antd';
import store from "@/store";
import { cloneDeep } from "lodash"
const routes = [
  {
    path: "/",
    component: lazy(() => import("@/pages/home")),
    meta: {
      auth: true,
      title: ""
    },
    type: 1,
    children: [
      {
        path: "/goods",
        type: 2,
        name: "商品",
        children: [
          {
            path: "/goods-info",
            component: lazy(() => import("@/pages/goods/goods-info")),
            meta: {
              auth: true,
              title: "商品列表"
            },
            name: "商品列表",
            type: 3,
          },
          {
            path: "/goods-template",
            component: lazy(() => import("@/pages/goods/goods-template")),
            meta: {
              auth: true,
              title: "商品模板列表"
            },
            name: "商品模板列表",
            type: 3,
          },
          {
            path: "/goods-classification",
            component: lazy(() => import("@/pages/goods/goods-classification")),
            meta: {
              auth: true,
              title: "商品分类"
            },
            name: "商品分类",
            type: 3,
          },
        ]
      },
      {
        path: "/sys",
        type: 2,
        name: "设置",
        children: [
          {
            path: "/user",
            component: lazy(() => import("@/pages/userlPage")),
            meta: {
              auth: true,
              title: "用户信息"
            },
            name: "用户信息",
            type: 3,
          },
          {
            path: "/setting",
            component: lazy(() => import("@/pages/sysPage")),
            meta: {
              auth: true,
              title: "系统设置"
            },
            name: "系统设置",
            type: 3,
          }
        ]
      },
      {
        path: "/files",
        type: 2,
        name: "文件",
        children: [
          {
            path: "/file-list",
            component: lazy(() => import("@/pages/files/file-list")),
            meta: {
              auth: true,
              title: "文件列表"
            },
            name: "文件列表",
            type: 3,
          },
        ]
      },
      {
        path: "/shop",
        type: 2,
        name: "商家",
        children: [
          {
            path: "/shop-list",
            component: lazy(() => import("@/pages/shop/list")),
            meta: {
              auth: true,
              title: "商家列表"
            },
            name: "商家列表",
            type: 3,
          },
        ]
      },


    ]
  },
  {
    path: "/login",
    component: lazy(() => import("@/pages/login")),
    type: 1,
  },
  {
    path: "*",
    component: lazy(() => import("@/pages/404")),
    type: 1,
  }
]

const generateRouter = (routers: any) => {

  return routers.map((item: any) => {
    if (item.children) {
      item.children = generateRouter(item.children)
    }

    item.element =
      <RouterBeforeEach route={item}>
        <Suspense fallback={
          <div className="flex">
            <Spin />
          </div>
        }>
          {/* 把懒加载的异步路由变成组件装载进去 */}
          <item.component />
        </Suspense>
      </RouterBeforeEach>

    return item
  })
}
const RouterBeforeEach = (props: { route: any, children: any }) => {
  if (props?.route?.meta?.title) {
    document.title = props.route.meta.title;
  }
  const { user } = store.getState()
  let isLogin = false
  if (user.token && user.userInfo.account) {
    isLogin = true
  }
  if (!isLogin && props?.route?.meta?.auth) {
    return <Navigate to={'/login'} replace />
  } else if (isLogin && ['/login'].includes(props?.route?.path)) {  // 已登录 登录页面需要跳转到默认页面
    return <Navigate to={'/'} replace />

  }

  return props.children
}
const initRouter = (routes: any) => {
  const defatData = cloneDeep(routes)
  const r: any[] = []
  defatData.map((item: any) => {
    if (item.children) {
      item.children = initRouter(item.children)
      if (item.type === 2) {
        r.push(...item.children)
      }
    }
    if (item.type != 2) {
      r.push(item)
    }
  })
  return r
}
const r = initRouter(routes)
const Router = () => useRoutes(generateRouter(r))
export { Router, routes }